<template>
	<div class="money1">
		<div class="xbox">
			<p>我的钱包</p>
			<p><i class="iconfont">&#xe633;</i></p>
		</div>
		<div class="xbox3">
			<ul>
				<li v-for="item in list" :key="item.id">
					<span>{{item.num}}</span>{{item.zi}}
					<p><img :src="item.imgURL" ><span>{{item.word}}</span></p>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
	export default{
		name:'Lymoney1',
		data(){
			return{
				list:[
					{id:1,imgURL:'images/ly1_6.png',word:'余额',num:0,zi:'元'},
					{id:2,imgURL:'images/ly1_7.png',word:'优惠卷',num:7,zi:'张'},
					{id:3,imgURL:'images/ly1_8.png',word:'游侠币',num:0,zi:'个'},
				],	
			}
		}
	}
</script>

<style scoped>
	.money1{
		width: 100%;
		background-color: white;
		border-radius: 0.16rem;
		margin: 0rem auto;
		padding-top: 0.4rem;
		height: 2.7rem;
	}
	.money1 .xbox{
		width: 100%;
		height: 0.9rem;
		display: flex;
		justify-content: space-between;
	}
	.money1 p:first-child{
		font-size: 0.42rem;
		font-weight: bold;
		text-indent: 0.5rem;
		
	}
	.money1 p i{
		font-size: 0.1rem;
		color: #b1b1b1;
		font-weight: bold;
		padding-right: 0.2rem;
	}
	.money1 .xbox3{
		width: 100%;
		height: 2rem;
		margin:auto;
	}
	.money1 .xbox3 ul{
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		height: 2rem;
	}
	.money1 .xbox3 ul li{
		width: 30%;
		height: 2rem;
		text-align: center;
	}
	.money1 .xbox3 ul li span:first-child{
		font-size: 0.4rem;
		font-weight: bold;
	}
	.money1 .xbox3 ul li p img{
		width: 13%;
		height: 13%;
		padding-right: 0.1rem;
		background-size: 100%;
	}
	.money1 .xbox3 ul li:first-child p img{
		width: 12.3%;
		height: 12.3%;
		padding-right: 0.1rem;
		background-size: 100%;
	}
	.money1 .xbox3 ul li p{
		padding-top: 0.35rem;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.money1 .xbox3 ul li:last-child p{
		padding-top: 0.3rem;
	}
	.money1 .xbox3 ul li:nth-child(1) p span{
		padding-top: 0.05rem;
	}
</style>
